<template>
	<view class="orderCenter">
		<view class="white-bg tabs-box">
			<uv-tabs
				:current="current"
				lineColor="#43cf7c"
				:itemStyle="{ padding: '16rpx 40rpx' }"
				:activeStyle="{ color: '#43cf7c' }"
				:list="tabsList"
				@click="handleClickTab"
			></uv-tabs>
		</view>
		<view class="container-box">
			<swiper class="swiper" style="height: 100%" @change="swiperChange" :current="swiperCurrent">
				<swiper-item :current-item-id="`item${childI}`" class="swiper-item" v-for="(child, childI) in tabsList" :key="childI">
					<scroll-view @scrolltolower="nextPage" scroll-y style="height: 100%">
						<view v-if="child.dataList?.length">
							<view class="item-box" @tap.stop="handleLookDetail(item)" v-for="(item, index) in child.dataList" :key="index">
								<view class="flex-box space-between-box">
									<view class="tips-box">
										<text>营期：</text>
										<text>{{ item.campPeriodStartDate }} ~ {{ item.campPeriodEndDate }}</text>
									</view>
									<view class="status-box">{{ orderStatusList.find((child) => child.value == item.orderStatus).label }}</view>
								</view>
								<view class="flex-box space-top-box start-box">
									<view class="img-box">
										<image :src="item.coverUrl || defaultIcon" mode="aspectFit"></image>
									</view>
									<view class="auto-box left-space">
										<view class="title-box">{{ item.routeTitle }}</view>
										<view class="tips-box mt-40-box">数量：{{ item.num }}</view>
										<view class="flex-box space-between-box">
											<view class="tips-box">营员姓名：{{ item.camperInfo }}</view>
											<view class="price-box">￥{{ item.payAmount }}</view>
										</view>
									</view>
								</view>
								<view class="flex-box end-box mt-40-box">
									<view class="default-btn btn-box" v-if="item.orderStatus === 0" @tap.stop="handleCancelOrder(item)">取消订单</view>
									<view class="active-btn btn-box left-space" v-if="item.orderStatus === 0">继续付款</view>
									<view class="active-btn btn-box left-space" v-if="item.orderStatus === 1">查看集合点</view>
								</view>
							</view>
							<uni-load-more :status="status" />
						</view>
						<view v-else-if="child.dataList?.length === 0 && isRequest" class="flex-box center-box fill-height">
							<uv-empty mode="data"></uv-empty>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, onMounted } from 'vue';
import defaultIcon from '@/asstes/images/order/defaultIcon.png';
import noData from '@/asstes/images/myCamper/noData.png';
import OrderApi from '@/api/order/api';
const tabsList = ref([
	{
		name: '全部',
		value: '99',
		dataList: []
	},
	{
		name: '待付款',
		value: '0',
		dataList: []
	},
	{
		name: '已购买',
		value: '1',
		dataList: []
	},
	{
		name: '已取消/已退款',
		value: '2',
		dataList: []
	}
]);
const isRequest = ref(false);
// tabs 当前下标
let current = ref(0);
// swiper 当前下标
let swiperCurrent = ref(0);
// 订单状态字典
let orderStatusList = ref([]);
// 有无更多数据
let status = ref('');
const queryParam = ref({
	pageNum: 1,
	pageSize: 10,
	queryType: '99'
});
/**
 * @description tabs切换
 * @param {*} item
 */
function handleClickTab(item) {
	current.value = item.index;
	swiperCurrent.value = item.index;
	queryParam.value.queryType = tabsList.value[current.value].value;
	queryParam.value.pageNum = 1;
	// resetDataList();
}
function resetDataList() {
	queryParam.value.queryType = tabsList.value[current.value].value;
	queryParam.value.pageNum = 1;
	tabsList.value.forEach((child, childI) => {
		child.dataList = [];
	});
	getOrderList();
}
function nextPage() {
	if (status.value === 'more') {
		queryParam.value.pageNum++;
		getOrderList();
	}
}
/**
 * @description 获取订单列表数据
 */
function getOrderList() {
	status.value = 'loading';
	OrderApi.getOrderList(queryParam.value)
		.then((res) => {
			isRequest.value = true;
			if (res.code === '00000') {
				if (res.data.list.length === 0) {
					status.value = 'noMore';
					return;
				}
				if (queryParam.value.pageNum > 1) {
					tabsList.value[current.value].dataList = [...tabsList.value[current.value].dataList, ...res.data.list];
				} else {
					tabsList.value[current.value].dataList = res.data.list;
				}
				if (res.data.total > tabsList.value[current.value].dataList.length) {
					status.value = 'more';
				} else {
					status.value = 'noMore';
				}
			}
		})
		.catch(() => {
			isRequest.value = true;
		});
}
// 设置状态字典
uni.getStorageSync('dict').forEach((item) => {
	if (item.typeCode === 'orderStatus') {
		orderStatusList = item.options;
	}
});

onLoad((option) => {
	let status = option.status || '99';
	current.value = tabsList.value.findIndex((item) => item.value === status);
	swiperCurrent.value = current.value;
	queryParam.value.queryType = tabsList.value[current.value].value;
	getOrderList();
});

/**
 * @description 查看详情
 */
function handleLookDetail(item) {
	uni.navigateTo({
		url: `./detail?orderId=${item.orderId}`
	});
}
/**
 * @description 左右滑动
 */
function swiperChange(e) {
	swiperCurrent.value = e.detail.current;
	current.value = e.detail.current;
	resetDataList();
}
/**
 * @description 取消订单
 */
function handleCancelOrder(item) {
	OrderApi.cancelOrder(item.orderId).then((res) => {
		resetDataList();
		uni.showToast({
			title: '取消成功',
			icon: 'none'
		});
	});
}
</script>

<style lang="scss" scoped>
.orderCenter {
	height: 100%;
	display: flex;
	flex-direction: column;

	.tabs-box {
		padding: 0 12rpx;
	}

	.container-box {
		flex: 1;
		overflow: hidden;
		padding: 24rpx 20rpx;

		.tips-box {
			font-size: 24rpx;
			color: rgba(128, 128, 128, 1);
		}

		.space-between-box {
			justify-content: space-between;
		}

		.status-box {
			color: rgba(212, 48, 48, 1);
			font-size: 24rpx;
		}

		.img-box {
			width: 204rpx;
			height: 198rpx;
			background: rgba(0, 0, 0, 0.04);

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.space-top-box {
			margin-top: 20rpx;
		}

		.start-box {
			align-items: flex-start;
		}

		.title-box {
			font-size: 32rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.left-space {
			margin-left: 12rpx;
		}

		.price-box {
			font-size: 40rpx;
			color: #43cf7c;
		}

		.mt-12-box {
			margin-top: 12rpx;
		}

		.mt-40-box {
			margin-top: 40rpx;
		}

		.btn-box {
			padding: 4rpx 26rpx;
			font-size: 24rpx;
			border-radius: 30rpx;
		}

		.default-btn {
			border: 1rpx solid rgba(128, 128, 128, 1);
		}

		.active-btn {
			border: 1rpx solid #43cf7c;
			color: #43cf7c;
		}
	}

	.nodata {
		width: 346rpx;
		height: 336rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.center-box {
		justify-content: center;
	}
}
</style>
